<template>
	<view class="">
		<view class="content">
			<view class="content-work">
				<view :class="['content-work-item',workId==item.id?'active':'']" v-for="(item,index) in work"
					:key='index' @tap="jumpWord(item.id)">
					{{item.title}}
				</view>
			</view>
			<block>
				<view class="content-detail" v-for="(item,index) in wordList" :key='index'>
					<view class="detail-top">
						<view class="left-name"> {{item.hospital.name}} </view>
						<view class="right-name"> {{item.type_data==0?'关联工单':'手动添加'}} </view>
					</view>
					<view class="product">
						<view class="product-left">
							<view class="product-left-name">
								产品名称：<text class="product-name-border">{{item.equipment.name||''}}</text>
							</view>
							<view class="product-left-name">
								设备序列号：<text class="product-name-border">{{item.equipment.serial||''}}</text>
							</view>
							<view class="product-left-name">
								类别：<text class="product-name-border">{{item.equipment.pinpai.name||''}}</text>
							</view>
							<view class="product-left-name">
								品牌：<text class="product-name-border">{{item.equipment.leibie.name||''}}</text>
							</view>
							<view class="product-left-name">
								型号：<text class="product-name-border">{{item.equipment.xinghao.name||''}}</text>
							</view>
							<view class="product-left-name">
								工单ID：<text class="product-name-border">{{item.workID||''}}</text>
							</view>
							<view class="product-left-name">
								预约时间：<text class="product-name-border">{{item.yuyue_time||''}}</text>
							</view>
							<view class="product-left-name" v-if="item.commiss_sale || item.commiss_sale != 0">
								销售提成次数：<text class="product-name-border">{{item.commiss_sale || ''}}</text>
							</view>
							<view class="product-left-name" v-if="item.commiss_eng || item.commiss_eng != 0">
								工程师提成次数：<text class="product-name-border">{{item.commiss_eng || ''}}</text>
							</view>
							<view class="product-left-name">
								收款状态：<text
									class="product-name-border">{{item.collect_data == 0 ? '应收订单' : '已收款订单'}}</text>
							</view>
							<view class="product-left-name">
								暂停状态：<text class="product-name-border">{{item.open_data == 0 ? '暂停' : '开启'}}</text>
							</view>
							<view class="product-left-name">
								亏损状态：<text class="product-name-border">{{item.is_loss == 1 ? '亏损' : '正常'}}</text>
							</view>
							<view class="product-left-name" v-for="(i,index) in item.engineer" style="display: flex;">
								<div class="product-left-name-border" style="width: 120rpx;height: 30rpx;">{{index == 0?'当前指派：':" "}}</div>
								<text class="product-left-name-border">{{i.nickname||'-'}}</text>
							</view>
						</view>
					</view>
					<view class="order-time">
						<view class="order-time-left">
							<view>{{item.createtime}}</view>
							<view v-if="workId == 6" style="margin-top: 10rpx;">到期时间：{{item.warranty_time_text}}</view>
						</view>
						<view class="order-time-right" @tap="jumpDetail(item.id)"> 详情 </view>
					</view>
				</view>
			</block>
			<block v-if="wordList.length==0">
				<view class="empty">
					<image src="../../static/empty.png" />
					<text>什么也没有哦...</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wordList: [], //底部列表
				workId: 0,
				work: [{
					id: 0,
					title: '报修工单'
				}, {
					id: 1,
					title: '维保工单'
				}],
				page: 1,
				last_page: 1
			}
		},
		watch: {
			workId(n, o) {
				this.getList()
				this.wordList = []
				this.page = 1
			}
		},
		onLoad() {

		},
		onShow() {
			this.wordList = []
			this.page = 1
			this.last_page = 1
			this.getList()
		},
		methods: {
			getList() {
				this.$https.post('/warranty/engineerList', {
					type:this.workId,
					page: this.page,
				}).then(res => {
					if (res.data.last_page != 0) {
						this.last_page = res.data.last_page
					}
					this.wordList = this.wordList.concat(res.data.data)
				})
			},
			jumpWord(id) {
				this.workId = id
			},
			jumpDetail(id) {
				wx.navigateTo({
					url: '../detail/detail?id=' + id
				})
			},
		},
		onReachBottom() {
			if (this.page != this.last_page) {
				this.page = this.page + 1
				this.getList()
			}
		},
	}
</script>

<style scoped lang="scss">
	.empty {
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
		font-size: 12px;
		color: #B6BDBD;

		image {
			width: 75px;
			height: 100px;
		}
	}

	.content {
		padding: 0rpx 0rpx 200rpx;
		background-color: #f6f6fb;
		height: 100vh;

		&-work {
			position: sticky;
			top: 0;
			z-index: 9;
			background-color: #f7f8fb;
			display: flex;
			padding: 28rpx 0 40rpx;
			justify-content: space-between;

			&-item {
				text-align: center;
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 48rpx;
			}
		}
	}

	.active {
		font-size: 36rpx;
		font-weight: 550;
		color: #141414;
		line-height: 48rpx;
		position: relative;
	}

	.active::before {
		content: '';
		width: 60rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background-color: $public-oclor;
		position: absolute;
		bottom: -16rpx;
		left: 50%;
		margin-left: -30rpx;
	}

	.active::after {
		content: '';
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: $public-oclor;
		position: absolute;
		bottom: -16rpx;
		left: 50%;
		margin-left: -40rpx;
	}

	.content-detail {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 32rpx 32rpx;
	}

	.detail-top {
		display: flex;
		justify-content: space-between;
		padding: 22rpx 20rpx;
	}

	.left-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #303030;
	}

	.right-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #FFAB00;
		letter-spacing: 4rpx;
	}

	.product {
		display: flex;
		justify-content: space-between;
		// padding: 20rpx;
		border-bottom: 2rpx solid #f6f6fb;
		border-top: 2rpx solid #f6f6fb;

		&-left {
			flex: 1;
			padding-left: 10px;

			&-name {
				font-size: 24rpx;
				font-weight: 400;
				color: #969699;
				margin: 12rpx 0;

				&-border {
					color: #303030;
					font-weight: 500;
				}
			}
		}
	}

	.order-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 20rpx;

		&-left {
			font-size: 24rpx;
			font-weight: 400;
			color: #646466;
		}

		&-right {
			padding: 12rpx 48rpx;
			background-color: $public-oclor;
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 52rpx;
		}
	}

	.text {
		margin-left: 10rpx;
		line-height: 54rpx;
	}

	/deep/.uni-stat__select {
		width: 89%;
		margin: 20rpx;
	}

	/deep/ .vue-ref {
		padding: 0 !important;
		border-bottom: 20px solid #fff;
	}
</style>